<!--
 * @Author: 仓鼠
 * @Date: 2023-09-11 9:20:49
 * @LastEditTime: 2023-09-11 9:20:49
 * @FilePath: components\Me\MebackgroundImg.vue
-->
<template>
	<div class="m-t-b">
		<div class="m-b-img-b" style="background: url(http://www.ay1.cc/img?w=2560&h=480) no-repeat center/cover;"> </div>
		<div class="m-b-b" @click="onChangeBgImg" v-if="props.coverBtnShow">
			<AppIcon class="m-b-b-img" icon="PicImage" size="16"></AppIcon>
			<span class="m-b-b-t">设置封面</span>
		</div>
	</div>
</template>

<script setup lang="ts" name="UserBackgroundImg">
/**
 * 用户空间页banner图组件
 */


export type UserBackgroundImgProps = {
	/**是否更换封面按钮展示 */
	coverBtnShow?: boolean
}


const props = withDefaults(defineProps<UserBackgroundImgProps>(), {
	coverBtnShow: true
})
const emits = defineEmits(['on-changebgimg'])

/**
 * @functionName onChangeBgImg
 * @param 。。。
 * @description 获取更改主页背景图的文件内容
 * @author 仓鼠
 * @date 2023-09-11 09:47:18
 * @version V1.0.0
 * @return 。。。
 */
const onChangeBgImg = () => {
	const fileImg = document.createElement('input')
	fileImg.type = 'file'
	fileImg.accept = 'image/png, image/jpeg,image/jpg'
	fileImg.click()
	fileImg.onchange = (e: any) => {
		emits('on-changebgimg', e.target.files[0])
	}
}
</script>

<style  lang="scss" scoped>
.m-t-b {
	/* meTopBackground */
	position: relative;
	width: 100%;

	.m-b-img-b {
		/* meBackgroundImgBox */
		width: 100%;
		height: 420px;

	}

	.m-b-b {
		/* meBackgroundButton */
		position: absolute;
		width: 112px;
		height: 40px;
		background: rgba(0, 0, 0, 0.14);
		border-radius: 8px;
		border: none;
		cursor: pointer;
		top: calc(30px + 80px);
		right: 60px;
		user-select: none;

		.m-b-b-img {
			/* meBackgroundButtonImg */
			width: 16px;
			height: 14px;
			margin: 13px 0 0 16px;
			color: #fff;
		}

		.m-b-b-t {
			/* meBackgroundButtonText */
			position: absolute;
			width: 56px;
			height: 20px;
			color: #fff;
			font-size: 14px;
			text-align: left;
			white-space: nowrap;
			line-height: 20px;
			margin: 10px 16px 10px 8px;
		}
	}
}
</style>
